<template>
	<view>
		<!-- <Header height="222rpx" title="记录" :paddingTop="navHeight"></Header> -->
		<view class="header-tab">
			<u-subsection :list="tablist" activeColor="#ff3140" keyName="name" mode="subsection" :current="current"
				@change="changeTab"></u-subsection>
		</view>
		<view class="w345 mauto" style="padding-top: 100rpx;">
			<view class="bradius10 bgfff shadow pl20 pr20 minh60vh posre zindex9" style="padding-top: 20rpx;">
				<view class="mt5" v-if="list.length" v-for="(v,i) in list" :key="i" @click="toDetail(v)">
					<view class="fs14 c999 mb5 order-box">
						<text>{{v.orderNo}}</text>
						<text>{{paymentMapStatus[v.paymentStatus] }}</text>
					</view>
					<view class="disflex align-cen ">
						<u--image mode="scaleToFill" :radius="10" style="margin: 0 20rpx 0 0;" :src="v.imageUrl"
							width="140rpx" height="140rpx">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
						<view class="flex1" style="height: 140rpx;">
							<view class="fs16 fb500 mb5">{{v.name}}</view>
							<view class="fs16 fb600 mb5 cFE8F32">￥{{v.totalAmount}}</view>
							<view class="fs12 c999 mb5">{{v.paymentTime}}</view>
							<view class="disflex" style="justify-content: space-between;" v-if="v.paymentStatus === 0">
								<text></text>
								<button @click="toBuyItem(v)"
									style="background: #FE8F32;color: #fff;padding: 0rpx 20rpx;font-size: 26rpx;">立即支付</button>
							</view>
							<view class="disflex" style="justify-content: space-between;" v-if="current === 2">
								<button @click="toComfirm(v)"
									style="background: #FE8F32;color: #fff;padding: 0rpx 20rpx;font-size: 26rpx;">确认收货</button>
							</view>

						</view>
					</view>
					<u-divider text=""></u-divider>
				</view>
				<view style="margin-top: 200rpx;" v-if="list.length === 0">
					<u-empty mode="data">
					</u-empty>
				</view>

			</view>
			<view class="" style="height: 100rpx;"></view>
		</view>
		<block v-if="showComfirm">
			<ChooseAddress ref="ChooseAddress" :show="showComfirm" :detailInfo="detailInfo" :defaultAddress="defaAd"
				@close="showComfirm=false" @handleBuy="handleBuy">
			</ChooseAddress>
		</block>
	</view>
</template>

<script>
	import {
		getOrderListApi,
		productPaymentH5Api,
		productPaymentAppApi,
		getUserAddressDeApi,
		getUserAddressListApi,
		userConfirmShopApi
	} from '@/api/index.js';
	import Header from "@/components/header/header.vue";
	import navbar from "@/components/navbar/navbar.vue";
	import ChooseAddress from '@/components/chooseAddress/chooseAddress.vue';
	export default {
		components: {
			Header,
			navbar,
			ChooseAddress
		},
		data() {
			return {
				showComfirm: false,
				detailInfo: {},
				defaAd: {},
				paymentMapStatus: {
					0: '待支付',
					1: '已支付',
					2: '已退款',
					3: '支付失败',
					4: '支付超时',
				},
				isLoading: true,
				point: 0,
				isActive: 0,
				// 或者如下，也可以配置keyName参数修改对象键名
				tablist: [{
						name: '待付款',
						value: 0
					}, {
						name: '待发货',
						value: 1
					}, {
						name: '已发货',
						value: 2
					},
					{
						name: '已签收',
						value: 3
					}
				],
				list: [],
				current: 0,
				page: 1,
				pageSize: 20,
				last_page: 1,
				navHeight: '0px',
			}
		},
		onLoad() {
			this.getOrderList();
			// this.$http.getUcenter().then(res => {
			// 	if (res.status) {
			// 		this.point = res.data.point
			// 	} else {
			// 		this.$utils.msg(res.info);
			// 	}
			// });
			// this.getList()
		},
		onShow() {
			console.log('出发');
			const user_account = uni.getStorageSync('user_account');
			console.log(user_account, 'user_account');
			if (user_account) {
				this.defaAd = user_account;
				uni.setStorageSync('user_account', null)
			} else {
				this.getUserAddressDe();
			}
		},
		onReachBottom() {
			// if (this.page == this.last_page) {
			// 	this.$utils.msg('已经到底啦');
			// 	return
			// }
			// this.page++
			// this.getOrderList()
		},
		methods: {
			// 跳转详情
			toDetail(item) {
				console.log(item);
				uni.setStorageSync('orderDetail', JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/mine/order/detail'
				})
			},
			changeTab(val) {
				console.log(val);
				this.current = val;
				// this.page = 1;
				this.getOrderList()
			},
			// 用户默认地址
			async getUserAddressDe() {
				this.defaAd = null;
				const res = await getUserAddressDeApi(uni.getStorageSync('UserInfo').userId);
				console.log(res, 'res--用户默认地址');
				if (res.code === 200 && res.data) {
					this.defaAd = res.data;
				} else {
					this.selectBankList();
				}
			},
			// 查询银行列表
			async selectBankList() {
				this.defaAd = null;
				const res = await getUserAddressListApi(uni.getStorageSync('UserInfo').userId);
				console.log(res, 'res-查询银行列表');
				// radiovalue1
				if (res.code == 200 && res.data.length > 0) {
					this.defaAd = res.data[0];
				}
			},
			toBuyItem(item) {
				this.detailInfo = item;
				this.showComfirm = true;
			},
			// 确认收货
			toComfirm(item) {
				uni.showModal({
					title: '提示',
					content: '您确定要确认收货吗？',
					success: async (res) => {
						if (res.confirm) {
							const res = await userConfirmShopApi({
								id: item.id,
								status: 3
							});
							if (res.code === 200) {
								uni.showToast({
									title: '确认收货成功'
								})
							}
						}
					}
				})
			},
			handleBuy(item) {
				console.log(item, 'item');
				this.detailInfo.addressId = item.addressId;
				this.toBuy();
				this.showComfirm = false;
			},
			// 购买商品
			async toBuy() {
				const item = this.detailInfo;
				console.log(item, 'item');
				// #ifdef APP
				let api = productPaymentAppApi
				// #endif
				// #ifdef H5
				let api = productPaymentH5Api
				// #endif
				const res = await api({
					userId: uni.getStorageSync('UserInfo').userId,
					productId: item.productId,
					quantity: 1,
					totalAmount: item.totalAmount,
					addressId: item.addressId,
				})
				// return
				if (res.code === 200) {
					console.log(res.data.body, 'res.data.body');
					// return
					// #ifdef H5
					uni.setStorageSync('alipaFrom', res.data.body);
					uni.navigateTo({
						url: '/pages/alipaFrom/alipaFrom'
					})
					// #endif
					// #ifdef APP
					uni.requestPayment({
						"provider": "alipay", //固定值为"alipay"
						"orderInfo": res.data.body, //此处为后端返回的订单信息字符串
						success(res) {
							var rawdata = JSON.parse(res.rawdata);
							console.log("支付成功");
							uni.showModal({
								title: '支付成功',
								content: rawdata,
								success: (res) => {
									this.getOrderList();
								}
							})
						},
						fail: function(err) {
							// uni.showModal({
							// 	title: '失败了',
							// 	content: JSON.stringify(err)
							// })
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
							console.log('支付失败:' + JSON.stringify(err));
						}
					});
					// #endif
					// this.$modal.showToast('购买成功~')
				}
			},
			// 中奖记录
			async getOrderList() {
				const res = await getOrderListApi({
					userId: uni.getStorageSync('UserInfo').userId,
					logisticsStatus: this.tablist[this.current].value
				});
				console.log(res, 'res');
				if (res.code === 200) {
					this.list = res.data;
				}
			},
			inputHeight(data, navHeight) {
				this.navHeight = navHeight + 'px'
			},
			back() {
				uni.navigateBack()
			},
			switchTab(value) {
				console.log(value)
				this.isActive = value
			},
			getList() {
				this.$http.getSignPointList({
					'page': this.page,
					'pageSize': this.pageSize
				}).then(res => {
					this.isLoading = false
					this.last_page = res.data.last_page
					this.list = this.page == 1 ? res.data.data : [...this.list, ...res.data.data]
				})
			}
		}
	}
</script>

<style>
	.mt-216 {
		margin-top: -216rpx !important;
	}

	.active {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.active_line {
		margin: 0 auto;
		margin-top: 5rpx;
		background: #0D8FFF;
		width: 40rpx;
		height: 6rpx;
		margin-left: 45rpx;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.translatedX {
		transform: translateX(150rpx);
	}

	.bb {
		border-bottom: 2rpx solid #F5F5F5;
	}

	.cFE8F32 {
		color: #FE8F32;
	}

	.w345 {
		width: 700rpx;
	}

	.mauto {
		margin: auto
	}

	.fs14 {
		font-size: 28rpx;
	}

	.cfff {
		color: #fff
	}

	.textc {
		text-align: center
	}

	.mb10 {
		margin-bottom: 10rpx;
	}

	.fs30 {
		font-size: 60rpx;
	}

	.bradius10 {
		border-radius: 20rpx;
	}

	.bgfff {
		background: #fff
	}

	.disflex {
		display: flex
	}

	.pl20 {
		padding-left: 40rpx;
	}

	.pt10 {
		padding-top: 20rpx;
	}

	.fs12 {
		font-size: 24rpx
	}

	.align-cen {
		align-items: center
	}

	.jsbet {
		justify-content: space-between
	}

	.pr20 {
		padding-right: 40rpx;
	}

	.minh60vh {
		height: calc(100vh - 64px);
	}

	.posre {
		position: relative;
		overflow-y: auto;
	}

	.zindex9 {
		z-index: 9
	}

	.fs16 {
		font-size: 30rpx;
	}

	.fb500 {
		font-weight: 500
	}

	.fb600 {
		font-weight: 600
	}

	.c999 {
		color: #999
	}


	.mb5 {
		margin-bottom: 10rpx;
	}

	.order-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-tab {
		position: fixed;
		height: 84rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 20rpx;
	}
</style>